<template>
  <div class="channel">
    <!-- 我的频道 -->
    <van-cell title="我的频道">
      <van-button
        size="small"
        round
        class="edit-btn"
        @click="isEdit = !isEdit"
        >{{ isEdit ? '完成' : '编辑' }}</van-button
      >
    </van-cell>
    <van-grid gutter="0.2rem">
      <van-grid-item
        v-for="(item, index) in myChannel"
        :key="item.id"
        :text="item.name"
        :class="['mychannel-item', { active: item.name === '推荐' }]"
        @click="changeActive(index, item)"
      >
        <template #icon>
          <van-icon name="cross" v-show="isEdit && item.name !== '推荐'" />
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 推荐频道 -->
    <van-cell title="推荐频道"></van-cell>
    <van-grid gutter="0.2rem">
      <van-grid-item
        v-for="item in recommendChannels"
        :key="item.id"
        :text="item.name"
        icon="plus"
        class="recommend-item"
        @click="$emit('add-channel', item)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels as getAllChannelsAPI } from '@/api'
export default {
  props: {
    myChannel: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isEdit: false,
      allChannels: []
    }
  },
  created() {
    this.getAllChannels()
  },
  methods: {
    async getAllChannels() {
      const { data } = await getAllChannelsAPI()
      this.allChannels = data.data.channels
    },
    changeActive(index, item) {
      if (this.isEdit) {
        // console.log(1)
        //删除我的频道
        if (item.name === '推荐') return
        // console.log(this.isEdit)
        this.$emit('del-channel', item.id)
      } else {
        //1.关闭弹窗
        // ! 第一种
        // this.$emit('close')
        // ! 第二种
        this.$parent.$parent.show = false
        //2. 切换Tab
        this.$emit('change-active', index)
      }
    }
  },
  computed: {
    recommendChannels() {
      //所有频道减去我的频道
      // 减 ---删选
      //如果aItem在数myChannel组出现，过滤掉
      return this.allChannels.filter(
        (aItem) => !this.myChannel.find((mItem) => aItem.id === mItem.id)
      )

      // const results = !!this.myChannel.find((mItem) => aItem.id === mItem.id)
      // if (results) {
      //   return false
      // } else {
      //   return true
      // }
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  :deep(.van-grid-item__text) {
    color: red;
  }
}
.channel {
  padding-top: 1.33333rem;
  :deep(.van-cell__value) {
    flex-direction: row-reverse;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    color: red;
    &.van-button--default {
      border-color: red;
    }
  }
  :deep(.van-grid-item__content) {
    background-color: #eee;
  }
  .recommend-item {
    :deep(.van-grid-item__content) {
      flex-direction: row;
      align-items: center;
    }
    :deep(.van-grid-item__icon) {
      font-size: 0.5rem;
    }
    :deep(.van-grid-item__icon + .van-grid-item__text) {
      margin-top: 6px;
    }
  }
  :deep(.mychannel-item) {
    .van-grid-item__content {
      position: relative;
    }
    .van-grid-item__icon-wrapper {
      position: unset;
    }
    .van-icon-cross {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 30px;
      transform: translate(45%, -50%);
      border: 2px solid #000;
      border-radius: 50%;
      z-index: 300;
    }
  }
}
</style>
